<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /*
    * map方法：react开发核心
    *   功能是将数组中每个元素都改变 将改变后的新元素形成一个新的数组
    *   接收参数：接收一个回调函数
    *           回调函数接收三个参数：item index arr
    *           回调函数返回值：返回每次的操作后的新元素
    *   map方法返回值：整体返回 变化之后新元素所形成的新数组
    *   返回的新数组对原数组没有影响
    *
    * */

    let arr = [1,2,3]
    let n = arr.map(item => item * 2)
    console.log(n,arr)

    /*
    * 封装map方法：
    *   接收参数：arr cb函数
    *   返回值：cb函数返回值是每次操作之后的结果 map函数整体返回变化之后所有新结果所形成的新数组
    *   功能：将数组中每个元素都改变 将改变之后的新元素形成一个新的数组返回出来
    *
    *
    * */

    function myMap(arr,cb){
        let result = []
        for(let i = 0;i < arr.length;i++){
            result.push(cb(arr[i],i,arr))
        }
        return result
    }

    /*
    * reduce 统计核心
    *   形式例外的方法：格式与参数与先前的方法有些不同
    *   解决什么问题：进行迭代统计
    *       一个参数的情况：接收一个回调函数
    *           回调函数接收四个参数：total迭代体(每次计算的结果就是这个参数) item元素 index下标 arr数组本身
    *           回调函数的返回值：迭代结果
    *   reduce方法返回值：返回最终的迭代结果
    *
    * */

    let arr1 = [1,2,3,4,5]
    //计算数组的和
    let s = arr1.reduce(function (x,y){ //function中的x是total迭代体 y是遍历的每个item元素
        return x + y //迭代结果 第一次迭代 因为第一次计算之前没有迭代结果 所以function中x直接等于数组中第一项的值1 y直接等于第二项的值2
                     //然后进行迭代计算1+2=3,将值3作为迭代结果返回出去，成为下次迭代的迭代体x，而y就是上一次迭代时那两个元素1,2之后的第三个元素3
                     //所以这次迭代就是迭代体x的值为上次迭代结果返回的值3，y就是第三项元素3，进行迭代计算3+3=6，将值6作为迭代结果返回出去
                     //第二次迭代结果值6返回出去，又将成为下一次迭代体x的值，如此循环迭代直至将所有元素都迭代完成，最后返回最终的迭代结果
    })
    console.log(s)

    /*
    * reduce接收两个参数的情况：
    *   第一个参数还是回调函数(同上)
    *   第二个参数是迭代体初始值
    *
    * */

    let arr2 = [
        {
            name:"火锅",
            score:80
        },
        {
            name:"大哥",
            score:60
        },
        {
            name:"火山",
            score:90
        }
    ]
    //计算所有人的成绩
    let s1 = arr2.reduce(function (total,item){ //total是成绩 item是每个人也就是数组中的每个对象
        return total + item.score //item是对象 但我们要的是对象中的成绩属性 所以打点调用 也可以item["score"]调用 但是不能写出item[score]，score是变量
    },0) //0就是第一次迭代的迭代体total的初始值
    console.log(s1)

    let arr3 = [1,2,3,4,5]
    //用字符串进行拼接
    let s2 = arr3.reduce(function (total,item){
        return total + item
    },"") //将初始值设置为空字符串，以后相加就是拼接了
    console.log(s2)


    /*
    * sort方法
    *   将数组按照一定顺序排序
    *   如果不加限制会按照每一项字符串的ASCII编码进行排序
    *   sort方法接收一个参数：回调函数
    *       这个回调函数要描述两个元素之间应该怎么排序
    *       所以回调函数接收两个参数：x y也可以叫left right
    *       回调函数会返回一个数字 然后sort根据数字的正负选择排序方式 0表示保持原样
    *
    * */

    let arr4 = [1,5,3,9,54,24,0,-9,7964,25,765,45662,51,75,2365,230]

    arr4.sort()
    console.log(arr4)
    arr4.sort(function (x,y){ //任意两个元素
        return x - y
    })

    let tea = [
        {
            name:"阿飞",
            age:19
        },
        {
            name:"万章",
            age:30
        },
        {
            name:"乌拉",
            age:22
        }
    ]
    //按照年龄从小到大排序
    let arr5 = tea.sort(function (x,y){
        return x.age - y.age
    })
    console.log(arr5)


    /*
    * flat方法 数组扁平化
    *   多个数组相套，将多个数组变成单个数组的方法
    *   如果不加参数 一次只展开一层数组 写数字多少展开多少层
    *
    * */

    let arr6 = [1,[2,3],[3,4,[5,6]]]
    let a = arr6.flat(Infinity) //无限展开
    console.log(a)

    let str = "abcdefgh"
    //反向输出字符串
    console.log(str.split("").reverse().join("")) //理解返回值的意义就能明白
    //str.split("")是将字符串拆开转换成数组返回，转成数组就可以调用数组的反转方法reverse()返回新数组，反转成新数组再去调用join添加到一起，
    //以空字符串("")分隔开来，返回一个字符串，所以最后又回到了一个字符串，这就是返回值的意义

</script>
</body>
</html>